<template>
  <div style="height: 100%;">
    <div>

      <div class="headerStyle">
        <div>
          <div style="width: 50%; float: left;">
            <div class="logoStyleContainer"><img class="logoStyle" src="../../static/image/logo.jpg"/></div>
            <div class="logoTextStyle">欢迎登录</div>
          </div>
          <div style="width: 50%; float: left;">
            <div class="erweimaTextStyle">企业微信</div>
            <div class="erweimaImgContainer">
              <img class="erweimaImgStyle" src="../../static/image/yiyiquerweima.png"/>
            </div>
          </div>
        </div>
      </div>

      <div class="mainStyle">
        <div class="mainImgContainer">
          <img class="mainImgStyle" src="../../static/image/phones.png"/>
        </div>
        <div class="formStyle">
          <div class="loginTextStyle">平台后台管理系统</div>
          <div style="padding: 24px;">

            <el-form ref="form" :model="form" :rules="rules" label-width="52px">
              <el-form-item class="username" label="账号" prop="admin_username">
                <el-input type="text" v-model="form.admin_username" placeholder="请输入账号"></el-input>
              </el-form-item>
              <el-form-item class="password" label="密码" prop="admin_password">
                <el-input type="password" v-model="form.admin_password" placeholder="请输入密码"></el-input>
              </el-form-item>
              <el-button type="primary" style="width: 100%;" @click="submitForm('form')">提交</el-button>
            </el-form>

          </div>
        </div>
      </div>

      <div style="margin-top: 30px;">
        <div class="footerTextStyle">ConpyRight2017-2018 共享网 All Rights Reserved .广州中投信息科技有限责任公司</div>
        <div class="footerTextStyle">技术支持：领蓝信息科技有限公司cbl</div>
      </div>
    </div>
  </div>
</template>
<style scoped>
  .headerStyle {
    height: 87px;
    line-height: 87px;
    overflow: hidden;
  }

  .logoStyleContainer {
    height: 87px;
    width: 87px;
    float: left;
    margin-left: 300px;
  }

  .logoStyle {
    width: 87px;
    height: 87px;
  }

  .logoTextStyle {
    width: 120px;
    float: left;
    color: #666;
    font-size: 24px;
    text-align: left;
    margin-left: 10px;
  }

  .erweimaTextStyle {
    float: left;
    color: #999;
    font-size: 14px;
    text-align: left;
    margin-left: 400px;
  }

  .erweimaImgContainer {
    float: left;
  }

  .erweimaImgStyle {
    height: 87px;
    width: 87px;
  }

  .mainStyle {
    width: 100%;
    height: 610px;
    background-image: url('../../static/image/loginbck.jpg');
    position: relative;
  }

  .mainImgContainer {
    width: 340px;
    height: 610px;
    position: absolute;
    left: 260px;
  }

  .mainImgStyle {
    width: 367px;
    height: 600px;
  }

  .formStyle {
    width: 330px;
    height: 370px;
    position: absolute;
    left: 860px;
    top: 120px;
    background-color: #fff;
  }

  .loginTextStyle {
    height: 60px;
    border-bottom: 1px solid #ddd;
    font-size: 22px;
    color: #999;
    text-align: center;
    line-height: 60px;
  }

  .footerTextStyle {
    text-align: center;
    font-size: 14px;
    color: #999;
    line-height: 24px;
  }
</style>
<script>
  import {user} from '../value';
  import app from '../appMethod';
  import MD5 from 'MD5';
  import Vue from 'vue';
  import {Button,Form,FormItem,Input} from 'element-ui';
  import {config} from "../config";
  Vue.use(Button);
  Vue.use(Input);
  Vue.use(Form);
  Vue.use(FormItem);

  export default {
    data: () => {
      return {
        show2: true,
        show: true,
        form: {
          admin_username: '',
          admin_password: '',
        },
        rules: {
          admin_username: [
            {required: true, message: '账号不能为空', trigger: 'blur'}
          ],
          admin_password: [
            {required: true, message: '密码不能为空', trigger: 'blur'}
          ]
        }
      };
    },
    methods: {
      submitForm(form) {
        const _this=this;
        _this.$router.push('/index');
        return;
        this.$refs[form].validate((valid,obj)=>{
          if(valid){
            let data={
              admin_username:this.form.admin_username,
              admin_password:this.form.admin_password
            };
            app.post(user.LOGIN_ADMIN,data).then((result)=>{
              if(result.code===1){
                app.alert(result.msg,'success',2);
                app.setToken(result.data.token);
                app.setData('name',result.data.name);
                _this.$router.push('/index');
              }else{
                app.alert(result.msg,'error',2);
              }
            });
          }else{
            return false;
          }
        });
        //this.$set(this, 'show2', !this.show2);
      }
    }
  }
</script>
